<template>
	<view>
		<!-- 动画改了uni动画源码的一行，渐显出现会闪一下navbar,取消了渐显 -->
		<uni-transition  mode-class="fade" :show="show">
			<firstshow ></firstshow>
		</uni-transition>
		<!-- 主页上部标题 -->
		<view class="title-top">
			<image src="/static/image/logo2.png" style='width: 80px;height:80px;'></image>
			<view class="maintext">
				<view class="title">计算机评测系统</view>
				<view class="dec">让世界没有不懂的电脑</view>
			</view>
		</view>
		<!-- 功能bar列表 -->
		<view class="barbox" v-for="item in barlist" :key='item.name' @tap='nav(item.name)' v-show='showbarlist'>
			<BarList :avt="item.avt"
					 :title="item.title"
					 :dec="item.dec"
					 :avtleft="item.avtleft"
			></BarList> 
		</view>
	</view>
</template>

<script>
 	export default {
		data() {
			return {
				show:true,
				showbarlist:true,
				barlist:[
					{
						name:'introduce',
						title:'硬件介绍',
						dec:'向您详细介绍每个硬件',
						avt:'/static/image/index/jieshao.png',
						avtleft:true
					},
					{
						name:'recommend',
						title:'硬件推荐',
						dec:'向您推荐最适合的硬件',
						avt:'/static/image/index/tuijian.png',
						avtleft:false
					},{
						name:'diy',
						title:'自选评测',
						dec:'计算评分、游戏帧数',
						avt:'/static/image/index/liebiao.png',
						avtleft:true
					},{
						name:'rank',
						title:'硬件排行榜',
						dec:'一览名誉颇高的硬件',
						avt:'/static/image/index/paihangbang.png',
						avtleft:false
					},{
						name:'steps',
						title:'装机步骤',
						dec:'手把手教你组装电脑',
						avt:'/static/image/index/buzhou.png',
						avtleft:true
					}
				]
			}
		},
		// 小程序中切换tabbar并不会再次出发动画（h5可以触发）,所以要通过onHide和onShow函数来改变v-show以进行动画控制
		onHide() {
			this.showbarlist=false
		},
		onShow() {
			this.showbarlist=true
		},
		onLoad() {
			var self=this
			setTimeout(function(){
				self.show=false
				uni.showTabBar()
			},1500)
			
		},
		methods: {
			nav(path){
				console.log(path)
				uni.navigateTo({
					url:`../../subpkg/${path}/${path}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-top{
		display: flex;
		flex-direction: row;
		margin: 2vh 5vw;
		image{
			height: 10vh;
			width: 10vh;
		}
		.maintext{
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 5vw;
		}
		.title{
			color: #1296db;
			font-size: 20px;
		}
		.dec{
			font-size: 14px;
			color: #c7c7c7;
		}
	}
</style>
